<template>
    <el-button-group>
        <div
            class="table-operate"
            :class="classPrefix"
            v-for="(btn, index) in list"
            :key="index"
            v-show="btn.btnVisible ? allDelBtnVisible : true && btn.auth"
        >
            <el-button :type="btn.type" :size="size" @click="btn.click(dataItem)">
                <el-icon class="table-icon">
                    <plus v-if="btn.icon === 'add'" />
                    <edit v-else-if="btn.icon === 'edit'" />
                    <delete v-else-if="btn.icon === 'del'" />
                    <refresh v-else-if="btn.icon === 'refresh'" />
                </el-icon>
                {{ btn.label }}
            </el-button>
        </div>
    </el-button-group>
</template>

<script>
import { getCurrentInstance, computed } from 'vue';

export default {
    name: 'table-btn',
    props: {
        size: {
            type: String,
            default: 'default'
        },
        list: {
            type: Array,
            default: new Array()
        },
        dataItem: {
            type: Object
        },
        classPrefix: {
            type: String,
            default: ''
        },
        isSlot: {
            type: String
        }
    },
    setup(props) {
        const { proxy } = getCurrentInstance();

        // 计算属性
        const allDelBtnVisible = computed(() => {
            return proxy.$store.state.allDelBtnVisible;
        });

        return {
            allDelBtnVisible
        };
    }
};
</script>
